<template>
    <view class="p-bot40" :style="{ '--color': color }">
        <status-bar title="我的预约" hideBg="1" :back="back"></status-bar>
        <view class="tabs">
            <u-tabs :list="list1" :scrollable="false" :lineColor="color" @click="click" :current="current" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></u-tabs>
        </view>

        <view class="list" :class="{ expired: item.state == 4 }" v-for="(item, index) in pageData" :key="index" @click="toDetails(item.id)">
            <view class="Tips Waiting" v-if="item.state == 1 || item.state == 3">待使用</view>
            <view class="Tips used" v-if="item.state == 2">已使用</view>
            <view class="Tips expiredbg" v-if="item.state == 4">已过期</view>
            <view class="Tips expiredbg" v-if="item.state == 5">已退款</view>
            <view class="Tips expiredbg" v-if="item.state == 6">退款中</view>
            <image :src="$imgUrls(item.time_detail.img)" mode="aspectFill" class="Img"></image>
            <view class="conTxt">
                <text class="name ellipsis">{{ item.time_detail.name }}</text>
                <text class="Time">购买时间:{{ item.add_time }}</text>
                <text class="Time">开宴时间:{{ item.time_detail.open_time_stamp }}</text>
                <view class="row">
                    <view class="table_li" v-for="(subItem, subIndex) in item.sites_detail" :key="subIndex">{{ subItem.type_name }}-{{ subItem.name }}</view>
                </view>
            </view>

            <view class="PriceInfo" v-if="item.state == 3 || item.state == 1">
                <view class="Earnest">
                    <text class="size22">定金:</text>
                    <text class="size32">￥{{ item.order_price }}</text>
                </view>
                <view class="Earnest" v-if="item.make_up_price > 0">
                    <text class="size22">妆造:</text>
                    <text class="size32">￥{{ item.make_up_price }}</text>
                </view>
                <view class="Balance" v-if="item.tail_price > 0">{{ item.state == 3 ? '应付' : '' }}尾款:￥{{ item.tail_price }}</view>
            </view>

            <view class="PriceInfo" v-if="item.state == 2">
                <view class="Use">￥{{ item.payment }}</view>
            </view>
        </view>

        <emptys v-if="!pageData.length"></emptys>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                list1: [
                    {
                        name: '全部',
                        state: ''
                    },
                    {
                        name: '待使用',
                        state: '3'
                    },
                    {
                        name: '已使用',
                        state: '2'
                    }
                ],
                current: 0,
                activeStyle: {
                    fontSize: '30rpx',
                    fontWeight: '600',
                    color: '#000'
                },
                inactiveStyle: {
                    fontSize: '30rpx',
                    color: '#333'
                },
                color: '#d7b06d',
                More: true,
                page: 1,
                limit: 10,
                state: '', // 0:待支付 1：已成单  2：已核销 3：待付尾款 4:已过期 5：已退款  6:退款中
                pageData: []
            };
        },
        onLoad() {
            this.getLockOrderList();
        },
        methods: {
            getLockOrderList() {
                this.$http
                    .get({
                        url: '/SiteApi/getLockOrderList',
                        data: {
                            page: this.page,
                            limit: this.limit,
                            state: this.state
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const Result = res.data || [];
                        this.page == 1 ? (this.pageData = Result) : (this.pageData = this.pageData.concat(Result));
                        if (Result.length < this.limit) this.More = false;
                    });
            },

            toDetails(id) {
                this.toUrl(`Details?id=${id}`);
            },
            click(e) {
                this.state = e.state;
                this.getLockOrderList();
                this.More = true;
                this.page = 1;
                this.current = e.index;
            }
        },
        computed: {
            // ...mapState(['color'])
        }
    };
</script>
<style>
    page {
        background-color: #f5ecda;
    }
</style>
<style lang="scss" scoped>
    .tabs {
        width: 100%;
        padding: 0 80rpx;
        height: 90rpx;
        text-align: center;
    }
    .list {
        width: 710rpx;
        margin: 20rpx auto 0;
        background-color: #ffffff;
        border-radius: 10rpx;
        padding: 20rpx;
        display: flex;
        align-items: center;
        position: relative;
    }
    .Tips {
        height: 50rpx;
        padding: 0 20rpx;
        border-radius: 0 0 10rpx 10rpx;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 24rpx;
    }
    .Waiting {
        background-color: #009933;
    }
    .used {
        background-color: #333;
    }
    .expiredbg {
        background-color: #bcbcbc;
    }
    .Img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    .conTxt {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .name {
        font-size: 30rpx;
        color: #000;
    }
    .Time {
        color: #999;
        font-size: 22rpx;
        margin-top: 6rpx;
    }
    .table_li {
        padding: 4rpx 10rpx;
        border: 1px solid var(--color);
        border-radius: 10rpx;
        color: var(--color);
        font-size: 20rpx;
        margin-top: 10rpx;
        margin-right: 10rpx;
    }
    .PriceInfo {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        align-self: flex-end;
        margin-left: 10rpx;
    }
    .Use {
        color: #ff4b4e;
        font-size: 34rpx;
    }
    .Earnest {
        display: flex;
        align-items: center;
        color: #ff4b4e;
    }
    .Balance {
        margin-top: 8rpx;
        color: #333;
        display: flex;
        align-items: center;
    }
    .expired {
        background-color: #f1f1f1;
    }
    .expired .Earnest {
        color: #66666f;
    }
    .expired .table_li {
        color: #66666f;
        border: 1rpx solid #66666f;
    }
    .expired .Balance {
        color: #66666f;
    }
</style>